import React, { Component } from "react";
import { Icon } from "antd";
import { connect } from "dva";
import styles from "./SceneDetailPage.less";
// import feedback1 from "../../assets/feedback1.jpg";
// import feedback2 from "../../assets/feedback2.jpg";
// import onlyPic from "../../assets/onlyPic.png";
// import people from "../../assets/people.jpg";
// import onlyText from "../../assets/onlyText.png";
// import PicnText from "../../assets/PicnText.png";
import WithnoPic from "./components/WithnoPic";
import PicCompare from "./components/PicCompare";

@connect(stores => ({
  sceneData: stores.addScene,
  dsDetail: stores.adddataSource
}))
class SceneDetailPage extends Component {
  componentDidMount() {
    setTimeout(() => {
      const { dispatch } = this.props;
      const { keyDetail } = this.props.sceneData;
      dispatch({
        type: "addScene/detailScene",
        payload: { sceneTemplateId: keyDetail.sceneTemplateId }
      }).then(() => {
        const { sceneData } = this.props;
        const { detailScene = {} } = sceneData;
        dispatch({
          type: "adddataSource/dataDetail",
          payload: { dsId: detailScene.dsId }
        });
      });
    }, 500);
  }

  renderApi = type => {
    if (type === 1) {
      return "API";
    }
    if (type === 2) {
      return "ADS";
    }
    if (type === 1) {
      return "DataHub";
    }
    return "LogHub";
  };

  render() {
    const { history, sceneData, dsDetail } = this.props;
    const { detailScene = {} } = sceneData;
    const { dataDetail = {} } = dsDetail;
    return (
      <div className={styles.root}>
        <div className={styles.basicInfo}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className={styles.title}>基本信息</span>
            <Icon
              type="close"
              style={{ color: "rgba(0,0,0,0.45)", fontSize: 16 }}
              onClick={() => {
                history.push("/intellPush/recommendCenter/situation");
              }}
            />
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              场景名称：
              <span className={styles.content}>
                {detailScene.templateName || "-"}
              </span>
            </div>
            <div className={styles.onePiece}>
              数据源名称：
              <span className={styles.content}>
                {/* {dataDetail.dsType ? this.renderApi(dataDetail.dsType) : `-`} */}
                {dataDetail.dsName || `-`}
              </span>
            </div>
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              管理员：
              <span className={styles.content}>
                {detailScene.owners && detailScene.owners.length > 0
                  ? detailScene.owners[0].name
                  : "-"}
              </span>
            </div>
            <div className={styles.onePiece}>
              归属部门：
              <span className={styles.content}>
                {detailScene.ownerDeptName || "-"}
              </span>
            </div>
          </div>
          <div className={styles.description}>
            <div className={styles.desc}>场景描述：</div>
            <div
              className={styles.content}
              style={{ width: "calc(50% - 120px)" }}
            >
              {detailScene.templateDescription
                ? detailScene.templateDescription
                : `-`}
            </div>
          </div>
        </div>
        {detailScene.contentType === "4" ? (
          <PicCompare detailScene={detailScene} />
        ) : (
          <WithnoPic detailScene={detailScene} />
        )}
        {/* <PicCompare /> */}
      </div>
    );
  }
}

export default SceneDetailPage;
